import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper";
import { memo } from "react";
import Image from "next/image";
import "swiper/css";
import "swiper/css/pagination";
import { NexusGenFieldTypes } from "../@types/nexus-typegen";
import { Banner } from "@prisma/client";
import { Box, Typography } from "@mui/material";
import RouteLink from "./RouteLink";

interface Props {
  banners: Banner[];
  delay?: number;
}

const SwipeBanner = memo(function Swipe({ banners, delay = 3500 }: Props) {
  return (
    <Swiper
      style={{ width: "100%", height: "100%", borderRadius: "1%" }}
      modules={[Pagination, Autoplay]}
      pagination={{ clickable: true }}
      autoplay={{
        delay,
        disableOnInteraction: false,
      }}
      loop
    >
      {banners.map((x: NexusGenFieldTypes["Banner"]) => (
        <SwiperSlide key={x.image}>
          <RouteLink href={x.url} title={x.name}>
            <Box
              sx={{
                width: 1,
                height: 1,
                position: "relative",
              }}
            >
              <Image
                layout="fill"
                objectFit="cover"
                src={x.image}
                alt={x.name}
                title={x.description || ""}
              />
              <Box
                sx={{
                  boxSizing: "border-box",
                  width: 1,
                  px: 3,
                  position: "absolute",
                  bottom: 0,
                  bgcolor: "#000000bb",
                }}
              >
                <Typography
                  variant="h4"
                  component="h2"
                  sx={{
                    pt: 2,
                  }}
                >
                  {x.name}
                </Typography>
                <Typography
                  variant="subtitle1"
                  component="h4"
                  sx={{
                    display: "-webkit-box",
                    textIndent: "2em",
                    overflow: "hidden",
                    WebkitBoxOrient: "vertical",
                    WebkitLineClamp: {
                      md: 2,
                      xs: 1,
                    },
                  }}
                >
                  {x.description}
                </Typography>
              </Box>
            </Box>
          </RouteLink>
        </SwiperSlide>
      ))}
    </Swiper>
  );
});

export default SwipeBanner;
